<template>
	<view class="content">
		<view class="cnt-header"></view>
		<view class="login-accounts">
			<view class="flex flex-twice">
				<view class="cu-item padding-lr" :class="index == TabCur ? 'text-green cur' : ''" v-for="(item, index) in tabnav" :key="index" @tap="tabSelect" :data-id="index">
					<view class="them-item">{{ item }}</view>
					<view class="line" v-if="index == TabCur"><text class="col-line"></text></view>
				</view>
			</view>
			<view class="login-accounts-item">
				<view class="">
					<view class="accounts-item" v-if="TabCur == 0">
						<view class="item-tel">
							<text class="person-icon"></text>
							<input class="tel-input"  v-model="form.username" placeholder-style="color:#5064eb" type="text" value="" placeholder="请输入您的手机号码"/>
						</view>
						<view class="item-password">
							<text class="password-icon"></text>
							<input class="pwd-input" v-model="form.password" placeholder-style="color:#5064eb" type="password" value="" placeholder="请输入您的登录密码"/>
						</view>
						<view class="submit-btn">
							<button class="login-btn" @click="submit(1)">立即登录</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form:{
				username:'',
				password:''
			},
			tabnav: ['个人登录'],
			TabCur: 0
		};
	},
	onLoad() {},
	methods: {
		tabSelect(e) {
			this.TabCur = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
		},
		submit(num){
			uni.request({
				url: 'http://39.100.86.3:8098/system/login/person', //接口地址。
				method: 'GET',
				data: {
					username: this.form.username,
					password:this.form.password
				},
				header: {
					'X-Requested-With': 'XMLHttpRequest'
				},
				success: (res) => {
					console.log(res.data);
					if(res.data.id!=null){
						this.$store.commit('userInfo', res.data);
						uni.setStorageSync("userInfo",res.data);
						uni.switchTab({
							url:"../pepole-info/pepole-info"
						})
					}
					
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background: url('../../static/login/login.png') no-repeat;
	width: 100%;
	height: 100%;
	background-size: 100%;
}
.cnt-header {
	height: 304upx;
}
.login-accounts-item{
	padding-top: 60upx;
	.accounts-item{
		.submit-btn{
			padding-top: 80upx;
			.login-btn{
				margin-left: 0;
				width: 635upx;
				height: 88upx;	
				border-radius: 44upx;
				font-family: SourceHanSansCN-Medium;
				font-size: 30upx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 88upx;
				letter-spacing: 0px;
				color: #ffffff;
				background-color: #5064eb;
			}
		}
		.item-tel,.item-password{
			position: relative;
			.person-icon,.password-icon{
				position: absolute;
				top: 50%;
				left: 5%;
				margin-top: -20upx;
			}
			.password-icon{
				margin-top: -18upx;
			}
		}
		.tel-input,.pwd-input{
			padding:0 94upx;
			width: 635upx;
			height: 88upx;
			background: rgba(80,100,235,0.1);
			font-family: SourceHanSansCN-Regular;
			font-size: 28upx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 72upx;
			letter-spacing: 0px;
			color: #5064eb;
			border-radius: 60upx;	
		}
		.item-password{
			margin-top: 58upx;
		}
	}
}
.login-accounts {
	padding: 44upx;
	.line {
		width: 100%;
		text-align: center;
		.col-line {
			width: 69upx;
			height: 7upx;
			background: #5064eb;
			border-radius: 3upx;
			display: inline-block;
		}
	}
}
</style>
